$(function () {
    var preData = (new Date(new Date() - 24 * 60 * 60 * 1000)).format("yyyy-MM-dd")
    /*$("#time1").val(preData).datetimepicker({
     format: 'yyyy-mm-dd',
     language : 'zh-CN',
     autoclose:true
     });*/
    var myChart1;
    var myChart2;
    var myChart3;


    $('.export1').click(function () {
        var a = $("#time2-01").val();
        var b = $("#time2-02").val();
        var token = window.localStorage.getItem('token');
        $('#dividend-print').attr("action", "/deal/doExportUserTotalExcel?token=" + token + "&startTime=" + a + "&endTime=" + b)
        $('#dividend-print').submit();
    });

    $('.export2').click(function () {
        var a = $("#time1").val();
        var token = window.localStorage.getItem('token');
        $('#dividend-print').attr("action", "/deal/doExportUserCountByPerHour?token=" + token + "&createTime=" + a);
        $('#dividend-print').submit();
    });

    $('.export3').click(function () {
        var token = window.localStorage.getItem('token');
        $('#dividend-print').attr("action", "/user/doExportPhoneTypeCount?token=" + token)
        $('#dividend-print').submit();
    });


    function getChart($dom, preData, callback) {
        $dom.val(preData).datetimepicker({
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            autoclose: 1,
            endDate: preData,
            minView: "3"
        });
        $dom.off("change").on("change", function () {

            callback($(this).val())
        }).trigger("change")
    }

    getChart($("#time1"), preData, function (date) {
        $.restPost("/deal/doQueryUserCountByPerHour", {
            token: window.localStorage.getItem('token'),
            createTime: date
        }).done(function (msg, res) {

            // console.log(msg,res)
            var data = []
            var option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '在线人数',
                        type: 'bar',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                    }
                ]
            };
            if (res.list.length > 0) {
                for (var i = 0; i < 24; i++) {
                    var flag = false;

                    for (var j = 0; j < res.list.length; j++) {
                        if (res.list[j].hour == i) {
                            flag = true;
                            break;
                        }
                    }
                    flag == true ? data.push(res.list[j].count) : data.push(0);
                }
            }


            // console.log("option",data)
            var instance = echarts.getInstanceByDom(document.getElementById('main1'));
            option.series[0].data = data
            // console.log(instance)
            if (!instance) {

                myChart1 = echarts.init(document.getElementById('main1'));
                myChart1.setOption(option);

                $(window).resize(function () {
                    myChart1.resize();

                })

            } else {
                instance.setOption(option);
            }


        })
    })

    function fenbu() {
        $.restPost("/user/doGetPhoneTypeCount", {
            token: window.localStorage.getItem('token')
        }).done(function (msg, res) {

            // console.log(msg,res)
            var data = []
            var option = {
                backgroundColor: '#2c343c',

                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },


                series: [
                    {
                        name: '机型占比',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [],
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };

            if (res.list.length > 0) {
                for (var i = 0; i < res.list.length; i++) {
                    data.push(
                        {value: res.list[i].userCount, name: res.list[i].phone}
                    )
                }

                option.series[0].data = data
            }

            // console.log(data,option)
            var instance = echarts.getInstanceByDom(document.getElementById('main3'));
            // console.log(instance)

            if (!instance) {
                myChart3 = echarts.init(document.getElementById('main3'));
                myChart3.setOption(option);

                $(window).resize(function () {
                    myChart3.resize();

                })
            } else {
                instance.setOption(option);
            }


        })
    }

    fenbu()

    function getChart2($dom1, $dom2, preData, callback) {
        $dom1.val(preData).datetimepicker({
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            autoclose: 1,
            endDate: preData,
            minView: "3"
        });
        $dom2.val(preData).datetimepicker({
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            autoclose: 1,
            endDate: preData,
            minView: "3"
        });
        callback($dom1.val(), $dom2.val())
        $dom1.off("change").on("change", function () {

            callback($dom1.val(), $dom2.val())
        })

        $dom2.off("change").on("change", function () {

            callback($dom1.val(), $dom2.val())
        })


    }

    getChart2($("#time2-01"), $("#time2-02"), preData, function (date1, data2) {
        // console.log(date1,data2)
        $.restPost("/deal/doGetUserTotal", {
            token: window.localStorage.getItem('token'),
            startTime: date1,
            endTime: data2,
        }).done(function (msg, res) {
            // console.log(res)
            var xLabel = []
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },


                xAxis: [
                    {
                        type: 'category',
                        // data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                        data: [],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '积分值',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },

                ],
                series: [
                    {
                        name: '积分',
                        type: 'line',
                        data: []
                    },
                    /*{
                     name:'扣除',
                     type:'line',
                     data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                     }*/
                ]
            };
            var list = res.list
            /*var list =[
             {
             "integral": 12,
             "dates": 1512316800000
             },
             {
             "integral": 4,
             "dates": 1512403200000
             },
             {
             "integral": -23,
             "dates": 1513267200000
             },
             {
             "integral": -13,
             "dates": 1513440000000
             }
             ]*/
            var data = []

            if (list.length > 0) {
                for (var i = 0; i < list.length; i++) {
                    xLabel.push(new Date(list[i].dates).format("yyyy-MM-dd"))
                    if (list[i].dates) {
                        data.push(list[i].integral)
                    }

                }
                option.xAxis[0].data = xLabel
                option.series[0].data = data
            }

            // console.log(data,option)
            var instance = echarts.getInstanceByDom(document.getElementById('main2'));
            // console.log(instance)

            if (!instance) {
                myChart2 = echarts.init(document.getElementById('main2'));
                myChart2.setOption(option);
                $(window).resize(function () {
                    myChart2.resize();

                })

            } else {
                instance.setOption(option);
            }


        })
    })

    // 基于准备好的dom，初始化echarts实例
    /* var myChart1 = echarts.init(document.getElementById('main1'));
     var myChart2 = echarts.init(document.getElementById('main2'));
     var myChart3 = echarts.init(document.getElementById('main3'));*/


    /*var option1 = {
     color: ['#3398DB'],
     tooltip : {
     trigger: 'axis',
     axisPointer : {            // 坐标轴指示器，坐标轴触发有效
     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
     }
     },
     grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
     },
     xAxis : [
     {
     type : 'category',
     data : ['1点', '2点', '3点', '4点', '5点', '6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点','24点']
     }
     ],
     yAxis : [
     {
     type : 'value'
     }
     ],
     series : [
     {
     name:'在线人数',
     type:'bar',
     data:[101, 52, 30, 33, 30, 30, 20,60, 50, 20, 34, 190, 130, 120, 10, 52, 200, 334, 390, 330, 220, 240, 520, 180]
     }
     ]
     };
     myChart1.setOption(option1);

     var option2 = {
     tooltip: {
     trigger: 'axis',
     axisPointer: {
     type: 'cross',
     crossStyle: {
     color: '#999'
     }
     }
     },

     legend: {
     data:['积分','扣除']
     },
     xAxis: [
     {
     type: 'category',
     data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
     axisPointer: {
     type: 'shadow'
     }
     }
     ],
     yAxis: [
     {
     type: 'value',
     name: '积分值',
     min: 0,
     max: 250,
     interval: 50,
     axisLabel: {
     formatter: '{value} '
     }
     },

     ],
     series: [
     {
     name:'积分',
     type:'line',
     data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
     },
     {
     name:'扣除',
     type:'line',
     data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
     }
     ]
     };
     myChart2.setOption(option2);

     var option3 = {
     backgroundColor: '#2c343c',

     title: {
     text: '机型占比',
     left: 'center',
     top: 20,
     textStyle: {
     color: '#ccc'
     }
     },

     tooltip : {
     trigger: 'item',
     formatter: "{a} <br/>{b} : {c} ({d}%)"
     },

     visualMap: {
     show: false,
     min: 80,
     max: 600,
     inRange: {
     colorLightness: [0, 1]
     }
     },
     series : [
     {
     name:'访问来源',
     type:'pie',
     radius : '55%',
     center: ['50%', '50%'],
     data:[
     {value:235, name:'安卓'},
     {value:380, name:'IOS'},
     ].sort(function (a, b) { return a.value - b.value; }),
     roseType: 'radius',
     label: {
     normal: {
     textStyle: {
     color: 'rgba(255, 255, 255, 0.3)'
     }
     }
     },
     labelLine: {
     normal: {
     lineStyle: {
     color: 'rgba(255, 255, 255, 0.3)'
     },
     smooth: 0.2,
     length: 10,
     length2: 20
     }
     },
     itemStyle: {
     normal: {
     color: '#c23531',
     shadowBlur: 200,
     shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
     },

     animationType: 'scale',
     animationEasing: 'elasticOut',
     animationDelay: function (idx) {
     return Math.random() * 200;
     }
     }
     ]
     };
     myChart3.setOption(option3);*/


    /*$(window).resize(function () {
     myChart1.resize();
     myChart2.resize();
     myChart3.resize();

     })*/

});